<template>
    <image @tap="showImg" :src="currentSrc" :mode="mode" @error="imageError"/>
</template>

<script setup lang="ts">
import { onMounted, reactive, watchEffect, toRefs } from "vue";
import { pathToBase64, base64ToPath } from "image-tools";
import { imStore } from "@/store/imStore";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
const props = defineProps({
    src: {
        type: String,
        required: true,
    },
    url: {
        type: String,
        required: false,
    },
    mode: {
        type: String,
        required: false,
    },
    saveKey: {
        type: String,
        required: false,
    },
    "lazy-load": {
        type: Boolean,
        default() {
            return false;
        },
        required: false,
    },
    prview: {
        type: Boolean,
        default() {
            return false;
        },
        required: false,
    },
});

const data = reactive({
    currentSrc: "",
    storageKey: "",
    reqTimes: 0,
    saveTimes:0,
    toBase64Times: 0,
    lazy: false,
});

const showImg = () => {
    if (!props.prview) {
        return;
    }
	const systemInfo: any = systemInfoStore();
	if(systemInfo.platform==='android'){
		const IM_STORE: any = imStore();
		IM_STORE.setReset(false)
	}
    uni.previewImage({
        current: data.currentSrc,
        // 当前显示图片的http链接
        urls: [data.currentSrc],
    });
};

// const imgfileToBase64 = (fileUrl) => {
//     pathToBase64(fileUrl)
//         .then((base64) => {
//             data.currentSrc = base64;
//             uni.setStorageSync(data.storageKey, base64);
//             uni.setStorageSync(data.storageKey + "url", props.src);
//         })
//         .catch((err) => {
//             if (data.toBase64Times < 3) {
//                 data.toBase64Times += 1;
//                 imgfileToBase64(fileUrl);
//             } else {
//                 data.currentSrc = props.src;
//             }
//         });
// };

const imageError = (event:any) => {
	data.currentSrc = props.src
	//data.currentSrc = "/static/head.jpg";
	console.error(props.src)
}

const saveFile = (tempFilePath: string) => {
    uni.saveFile({
        tempFilePath,
        success(obj) {
            const { savedFilePath } = obj;
            //data.currentSrc = savedFilePath;
            uni.setStorageSync(data.storageKey, savedFilePath);
            uni.setStorageSync(data.storageKey + "url", props.src);
        },
        fail() {
            if (data.saveTimes < 3) {
                data.saveTimes += 1;
                saveFile(tempFilePath);
            } else {
                data.currentSrc = "/static/head.jpg";
            }

        },
    });
};

const downLoadImg = (download_url) => {
    uni.downloadFile({
        url: download_url,
        success(res) {
            const { tempFilePath } = res;
            saveFile(tempFilePath);
        },

        fail(err) {
            //data.currentSrc = "/static/head.jpg";
            if (data.reqTimes < 3) {
                data.reqTimes += 1;
                downLoadImg(download_url);
            } else {
                data.currentSrc = "/static/head.jpg";
            }
        },
    });
};

watchEffect(() => {
    /* #ifdef H5 */
    data.currentSrc = props.src;
    return;
    /*#endif*/

    if (props.src && props.src.startsWith("/static")) {
        data.currentSrc = props.src;
        return;
    }

    data.storageKey = props.saveKey || props.src;
    data.lazy = props["lazy-load"];

    if (!props.src) {
        return;
    }

    const base64Img = uni.getStorageSync(data.storageKey);

    if (props.src === "cache") {
        if (base64Img) {
            data.currentSrc = base64Img;
        } else {
            data.currentSrc = props.url;
        }
        return;
    }

    if (props.src) {
        const oldUrl = uni.getStorageSync(data.storageKey + "url");
        if (base64Img && props.src === oldUrl) {
            data.currentSrc = base64Img;
        } else {
            data.currentSrc = props.src;
            downLoadImg(props.src);
        }
    }
});

const { currentSrc, lazy } = toRefs(data);

onMounted(() => {});
</script>

